<extend name="./Application/Common/View/block/base.php" />
<block name="header">
    <include file="./Application/Admin/View/block/easyui_header.php" />
    <include file="./Application/Admin/View/block/amap_header.php" />
    <link rel="stylesheet" href="__PUBLIC__/module/manage/css/visualization.css" />
    <style>
        .botton-tip{
            position: absolute;
            right: 12px;
            bottom: 0px;
        }
        #rain_dist{
            position: absolute;
            right: 12px;
            bottom: 60px;
            width: 54px;
            height: 96px;
        }
    </style>
</block>
<block name="bdoy">
    <body>
    <div id="gtx" class="easyui-window" closed="true" title="概览查看" style="width: 600px;height: 400px;"></div>
    <div id="container"></div>
    <img id="rain_dist" src="__PUBLIC__/img/rain_dist.jpg">
    <div class="botton-tip">
        <a href="#" onclick="show_circles()" id="show_circles" class="easyui-linkbutton" data-options="iconCls:'icon-add',iconAlign:'top'">显示雨情标注</a>
        <a href="#" onclick="hide_circles()" id="hide_circles" class="easyui-linkbutton" data-options="iconCls:'icon-remove',iconAlign:'top'">隐藏雨情标注</a>
    </div>
    <div id="dlg" closed="false" class="easyui-dialog" title="故障" top="300px" left="12px" style="width: 80px;height: 200px;">
        <ul id="nowork_ul">

        </ul>
    </div>
    </body>
</block>
<block name="footExtendJs">
    <script type="text/javascript">
        var map = new AMap.Map('container', {
            resizeEnable: true,
            zoom:13,
            center: [102.70281,25.033455],

        });
        map.plugin(["AMap.MapType"],function(){
            var mapType= new AMap.MapType({showRoad:true});
            map.addControl(mapType);
        });

        //取得所有泵站，包括，id，名称，gps，设备状态，天气情况
        //标注上点、名称
        get_all_facilities();


        //标注上poi
        //获取最新天气数组
        //地图上画出图形


        //获取所有设施
        var facilities = {};
        function get_all_facilities(){
            var url = '__URL__/get_all_facilities';
            $.getJSON(url, function(data){
                facilities = data;
                map.remove(markers);
                add_point();
            })
        }

        //标注上点
        var markers = [];
        var marker;
        var circles = [];
        var colors = {:get_kv_val('eain_colors')};
        var fillOpacity = {:get_kv_val('rain_fillOpacity')};
        function add_point(){
            for(var i=0;i<facilities.length;i++){
                var obj = facilities[i];
                if(obj.gps == ''||obj.gps == null){
                    continue;
                }
                var gps = obj.gps.split(",");
                gps = [gps[0],gps[1]];
                var icon = '';
                switch (obj.status){
                    case -1:
                        icon = 'http://www.dabaoku.com/gif/biaoshi/032/011k.gif';
                        $('#nowork_ul').append('<li><a onclick="open_map_dialog('+obj.id+', ['+gps+'])">' +
                        '<img src="http://www.dabaoku.com/gif/biaoshi/032/011k.gif"/>'+
                        '<div>'+ obj.name + '</div>'+
                        '</a></li>');
                        break;
                    default  :
                        icon = '__PUBLIC__/module/manage/image/csdt/nor.png';
                        break;
                }
                marker = new AMap.Marker({
                    position: gps,
                    icon: new AMap.Icon({
                        size: new AMap.Size(40, 50),
                        image: icon,
                        imageOffset: new AMap.Pixel(0, 0)
                    })
                });
                marker.setMap(map);
                marker.gps = gps;
                marker.panelid = obj.id;
                marker.content = '<div id="'+obj.id+'" >'+obj.id+'</div>';
                marker.on('click', markerClick);
//                marker.emit('click', {target: marker});

                // 设置label标签
                marker.setLabel({
                    offset: new AMap.Pixel(10, 33),
                    content: obj.name
                });
                markers.push(marker);
                //开始标注天气
                var circle = new AMap.Circle({
                    center: gps,
                    radius: 1000,
                    strokeColor: "",
                    strokeOpacity: 0,
                    strokeWeight: 0,
                    fillColor: colors[obj.weather],
                    fillOpacity: fillOpacity[obj.weather]
                });
                circle.setMap(map);
                circles.push(circle);
                $('#show_circles').linkbutton('disable');
                $('#hide_circles').linkbutton('enable');
            }
            var left= window.innerWidth-80-13;
//            $('#dlg').window('open').window('resize',{width:'80px',height:'200px',top: '150px',left:left+'px'});
        }

        function show_circles(){
            $('#show_circles').linkbutton('disable');
            $('#hide_circles').linkbutton('enable');
            for(var i=0;i<circles.length;i++){
                circles[i].show();
            }
        }

        function hide_circles(){
            $('#hide_circles').linkbutton('disable');
            $('#show_circles').linkbutton('enable');
            for(var i=0;i<circles.length;i++){
                circles[i].hide();
            }
        }

        function markerClick(e) {
            // 设置缩放级别和中心点
            open_map_dialog(e.target.panelid, e.target.gps)
        }

        function open_map_dialog(id, gps){
            map.setZoomAndCenter(14, gps);
            $('#gtx').window('open').panel('refresh', '__URL__/overview?id='+id)
        }
    </script>


</block>
